<div th:fragment=pageinfo(mlist)>
    <nav aria-label="Page navigation">
        <div th:text="${'' + mlist.total + '件レコード'}" class="page"></div>
        <ul class="pagination" th:if="${mlist.pages != 0}">
            <li>
                <a  href="javascript:void(0)" aria-label="Previous" class="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>

            <li  th:each="count:${#numbers.sequence(1, mlist.pages)}">
                <a class="page-item" href="javascript:void(0)" data="2" th:text="${count}"></a>
            </li>
            <li th:if="${mlist.pages == 0}">
                <a class="page-item" href="javascript:void(0)" data="1" th:text="1"></a>
            </li>

            <li>
                <a  href="javascript:void(0)" aria-label="Next" class="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
    <div id="failpage" class="alert alert-danger fade" role="alert"  style="width: 190px; position: fixed; top: 40%; left: 50%; margin-left: -80px;">
        <strong class="message">!</strong>
    </div>
    <script th:inline="javascript">
        var _pageNo = [[${mlist.pageNum}]] || 1;
        if ($("[name='pageNo']").length == 0) {
            $("form").append(`<input type="hidden" name="pageNo" value="${_pageNo}" />`)
        } else {
            $("form [name='pageNo']").val(_pageNo);
        }
        $("[name='pageNo']").val(_pageNo)
        $("ul.pagination>li").on('click', 'a.page-item', function (e) {
            let num = eval($(e.target).html());
            if (!$("form").has("[name='pageNo']")) {
                $("form").append(`<input type="hidden" name="pageNo" value="${num}" />`)
            } else {
                $("form [name='pageNo']").val(num);
            }

            $("form").submit();
        })
        $("ul.pagination>li>a.Next").on('click', function(){
            if (_pageNo < [[${mlist.pages}]])
                _pageNo++
            else {
                $("#failpage").removeClass("fade").addClass('fadein').children(".message").html("Maxページしました！")
                window.setTimeout(function(){
                    $("#failpage").removeClass("fadein").addClass('fade')
                },1000);//显示的时间
                return;
            }

            $("form [name='pageNo']").val(_pageNo);
            $("form").submit();
        })
        $("ul.pagination>li>a.Previous").on("click", function(){

            if (_pageNo > 1)
                _pageNo--
            else {
                $("#failpage").removeClass("fade").addClass('fadein').children(".message").html("ONEページしました！")
                window.setTimeout(function(){
                    $("#failpage").removeClass("fadein").addClass('fade')
                },1000);//显示的时间
                return;
            }

            $("form [name='pageNo']").val(_pageNo);
            $("form").submit();
        })
    </script>
</div>